<!-- Created by henian.xu on 2018/11/9. -->

<template>
    <div class="region-picker">
        <XSelect
            v-for="(area,index) in areaList"
            :key="area.id||index"
            :data="area.children"
            v-model="area.model"
            @input="onPickerInput($event,area,index)"/>
    </div>
</template>

<script>
import RegionMixin from './RegionMixin';
export default {
    name: 'RegionPicker',
    mixins: [RegionMixin],
    data() {
        return {
            appLevel: true,
            areaList: [],
            areaPathName: '',
            oldValue: null,
        };
    },
    computed: {
        model: {
            get() {
                return this.value;
            },
            set(val) {
                let value = val;
                if (val.__innerInput) {
                    value = val.id;
                    this.updateAreaPathName();
                    this.oldValue = value;
                    this.$emit('input', value);
                } else {
                    // 外部变更
                    if (this.oldValue !== value) {
                        this.init(value);
                    }
                }
            },
        },
    },
    watch: {
        value: {
            handler(val) {
                // 外部的变更
                this.model = val;
            },
            immediate: process.client,
        },
    },
    methods: {
        init(val) {
            if (!val) {
                this.updateRegion();
            } else {
                this.getLoadSelectNode({ id: val }).then(json => {
                    this.areaList = [];
                    let parentArea = { id: this.pId };
                    json.forEach(area => {
                        const selectedArea = (area => area.find(item => item.isSelect))(area);
                        this.areaList.push({
                            ...selectedArea,
                            pId: parentArea.id,
                            children: area,
                            model: selectedArea.id,
                        });
                        parentArea = selectedArea;
                    });
                    this.updateAreaPathName();
                });
            }
        },
        updateRegion(index = 0) {
            let lastArea = this.areaList[index];
            if (!lastArea) {
                lastArea = { model: this.pId };
            } else {
                index++;
            }
            this.getChildren({ pId: lastArea.model }).then(json => {
                if (!json.length) {
                    this.areaList.splice(index, this.areaList.length);
                    this.onConfirm();
                    return;
                }
                this.areaList.splice(index, 1, {
                    ...json[0],
                    pId: lastArea.model,
                    children: json,
                    model: json[0].id,
                });
                this.updateRegion(index);
            });
        },
        onPickerInput($event, area, index) {
            const selectedArea = (item => item.find(item => item.id === $event))(area.children);
            Object.keys(selectedArea).forEach(key => {
                area[key] = selectedArea[key];
            });
            this.updateRegion(index);
        },
        updateAreaPathName() {
            this.areaPathName = this.areaList.reduce((prev, next) => (prev.push(next.name), prev), []).join('/');
        },
        onConfirm() {
            this.model = {
                ...this.areaList[this.areaList.length - 1],
                __innerInput: true,
            };
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';
.region-picker {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .select {
        flex: 1 1 1%;
        + .select {
            margin-left: $margin-small;
        }
    }
}
</style>
